<template>
	<view class="content">
		<view class="top" v-if="cont.length > 0">
			<view class="topItem">
				<view class="topTitle" @tap="show('level')">
					评价等级<i class="iconfont iconbangzhuzhongxin"></i>
				</view>
				<view class="topCont">{{detail.level_name}}</view>
			</view>
			<view class="topItem">
				<view class="topTitle">评价分数</view>
				<view class="topCont">{{detail.level_score}}<text>分</text></view>
			</view>
		</view>
		
		<!-- 选项卡 -->
		<view class="nav">
			<view class="navItem" :class="navIndex == index ? 'navActive':''" v-for="(item,index) in navList" :key="index" @click="switchClick(index)">{{item}}</view>
		</view>
		
		<!-- 评价为空 -->
		<view class="not_data" v-if="datasCont.length == 0">
			<i class="iconfont iconzanwupingjia"></i>
			<view class="not_data_text">当前暂无相关评价~</view>
		</view>
		<!-- 评价列表 -->
		<view class="list" v-else>
			<view class="item" v-for="(item,index) in datasCont" :key="index" @tap="show('cont',item.content_text)">
				<view class="item_left" :class="{bg_color:item.content_type == 2}"></view>
				<view class="item_rigth">{{item.content_text}}</view>
			</view>
		</view>
	
		<!-- 蒙版 -->
		<view class="pop" v-if="isLevel || isCont" @tap="close">
			<view class="popAll">
				<view class="popTitle" v-if="isLevel">评价等级</view>
				<scroll-view scroll-y="true" :class="level.length >= 5 ? 'popView' : ''" v-if="isLevel">
					<view class="popCont">
						<view class="popCont_item" :class="item.isShow ? 'popActive' : ''" v-for="(item, index) in level" :key="index">
							<text>{{item.level_score}}分</text><text>等级：{{item.level_name}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="popCont" v-if="isCont">{{contText}}</view>
				<view class="popConfirm" @tap.stop="close">
					<view class="popYes">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: uni.getStorageSync('courseCont'), //课程相关数据
				detail: {}, //评价详情
				navList: ['全部','好评','不足'], //选项卡列表
				navIndex: 0, //选项卡索引
				level: [], //评价等级列表
				cont: [], //评价内容列表
				datasCont: [], //当前选项卡索引下评价内容列表
				isLevel: false, //是否展示评价等级列表详情
				isCont: false, //是否展示评价内容详情
				contText: '' //评价内容详情
			}
		},
		onLoad() {
			this.getDetail();
		},
		methods: {
			/* 获取评价详情 */
			getDetail() {
				var result = {
					day: this.data.day,
					school_id: this.data.school_id,
					usr_id: uni.getStorageSync('currentChild').student_id,
					semester_week_id: this.data.semester_week_id,
					time_lesson_id: this.data.time_lesson_id
				}
				this.$kbapi.apiPost('mobile/eval/course/getInfos', result).then(res => {
					if (res.data.code == 200 && res.data.data.total > 0) {
						this.detail = res.data.data.list[0];
						var arrText = this.detail.content_text.split(',');
						var arrType = this.detail.content_type.split(',');
						var arr = [];
						for(var i = 0; i < arrText.length; i++) {
							var data = {
								content_text: arrText[i],
								content_type: arrType[i]
							}
							arr[i] = data;
						}
						arr.forEach((item,index)=>{
							if(item.content_type == 1) {
								
							}
						})
						this.cont = arr;
						this.datasCont = arr;
						this.getLevel();
					} else {
						this.detail = {};
					}
				})
			},
			/* 获取评价等级列表 */
			getLevel() {
				var result = {
					school_id: this.data.school_id,
					limit: 999
				}
				this.$kbapi.apiPost('mobile/eval/level/infos', result).then(res => {
					if (res.data.code == 200 && res.data.data.length > 0) {
						this.level = res.data.data;
					} else {
						this.level = [];
					}
				})
			},
			/* 切换选项卡 */
			switchClick(index) {
				this.navIndex = index;
				if(this.cont) {
					this.datasCont = [];
					if(index == 0) {
						this.datasCont = this.cont;
					} else {
						this.cont.forEach((item,key)=>{
							if(item.content_type == index) {
								this.datasCont.push(item);
							}
						})
					}
				}
			},
			/* 展示弹框 */
			show(type,text) {
				switch (type){
					case 'level':
						this.isLevel = !this.isLevel;
						break;
					case 'cont':
						this.isCont = !this.isCont;
						this.contText = text;
						break;
					default:
						break;
				}
			},
			/* 关闭弹框 */
			close(){
				this.isCont = false;
				this.isLevel = false;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
	}
	.content {
		width: 100%;
		min-height: 100%;
	}
	
	/* 顶部 */
	.top{
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: space-around;
		background-color: #FF9900;
		.topItem{
			color: #FFFFFF;
			.topTitle{
				display: flex;
				align-items: center;
				font-size: 32upx;
			}
			.topCont{
				font-size: 32upx;
				text-align: center;
				& text{
					font-size: 24upx;
				}
			}
		}
	}

	/* 选项卡 */
	.nav{
		width: 100%;
		height: 88upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		.navItem{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #666666;
			font-size: 34upx;
		}
		.navActive{
			color: #FF9900;
		}
		.navActive:after {
			content: '';
			width: 60upx;
			height: 4upx;
			font-weight: bold;
			background: #FF9900;
			position: absolute;
			margin-top: 42upx;
		}
	}

	/* 评价列表 */
	.list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin: 30upx 30upx 100upx;
		.item{
			width: 276upx;
			padding: 16upx 30upx;
			min-height: 108upx;
			background-color: #FFFFFF;
			margin-bottom: 20upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-radius: 10upx;
			.item_left {
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				text-align: center;
				line-height: 60upx;
				color: #FFFFFF;
				font-size: 34upx;
				background: rgba(0, 213, 162, 1);
				margin-right: 20upx;
			}
			.bg_color {
				background: #FF7171 !important;
			}
			
			.item_rigth {
				max-width: 196upx;
				color: #333333;
				font-size: 30upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
				word-wrap: break-word;
			}
			.itemTitle{
				color: #666666;
				font-size: 34upx;
			}
			.itemCont{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				.contItem{
					width: 276upx;
					padding: 16upx 30upx;
					min-height: 108upx;
					background-color: #FFFFFF;
					margin-bottom: 20upx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.item_left {
						width: 60upx;
						height: 60upx;
						border-radius: 50%;
						text-align: center;
						line-height: 60upx;
						color: #FFFFFF;
						font-size: 34upx;
						background: rgba(0, 213, 162, 1);
						margin-right: 20upx;
					}
					.bg_color {
						background: #FF7171 !important;
					}
					
					.item_rigth {
						max-width: 196upx;
						color: #333333;
						font-size: 30upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break: break-all;
						word-wrap: break-word;
					}
				}
			}
		}
	}
	
	/* 数据为空 */
	.not_data {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		i {
			font-size: 850rpx;
			line-height: 1;
			color: #E5E5E5;
		}

		.not_data_text {
			color: #999999;
			font-size: 42upx;
			margin-top: -160upx;
		}
	}

	/* 弹框 */
	.pop {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
		.popAll{
			width: 80%;
			border-radius: 40upx;
			overflow: hidden;
			background: #FFFFFF;
		}
		.popView {
			height: 500upx;
		}
	}
	.popTitle{
		color: #666666;
		font-size: 38upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		border-bottom: 2upx solid #E5E5E5;
	}
	.popCont{
		color: #666666;
		font-size: 34upx;
		text-align: center;
		padding: 40upx;
		.popCont_item{
			color: #666666;
			font-size: 34upx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 56upx;
			line-height: 1;
			& text {
				margin: 0 25upx;
			}
		}
	}
	.popConfirm{
		height: 90upx;
		border-top: 2upx solid #E5E5E5;
		& view {
			color: #FF9900;
			font-size: 34upx;
			text-align: center;
			line-height: 90upx;
		}
	}
</style>
